<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品列表</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"/>
    <script src="/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/css/common.css"/>
</head>
<body>

<#if debug??>
    <table border="1px" width="500px">
        <tr>
            <th>id</th>
            <th>title</th>
            <th>price</th>
            <th>pic_thumbnail</th>
            <th>pic</th>
            <th>store_name</th>
            <th>sub_title</th>
            <th>total_comment</th>
        </tr>
        <tr>
            <td>${goods.id}</td>
            <td>${goods.title}</td>
            <td>${goods.price}</td>
            <td>${goods.pic_thumbnail}</td>
            <td>${goods.pic}</td>
            <td>${goods.store_name}</td>
            <td>${goods.sub_title}</td>
            <td>${goods.total_comment}</td>
        </tr>
    </table>
</#if>

<div id="header">
    <!-- 头部 start -->
    <div class="top_banner">
        <img width="100%" src="/img/top_banner.jpg" alt="">
    </div>
    <div class="shortcut">
        <div class="home_page">
            <a href="/goods/list">首页</a>
        </div>
        <!-- 未登录状态  -->
        <div class="login_out">
            <span id="welcome">欢迎您！<span id="user_name">${(user.username)!'未知'}</span></span>
            <a href="/user/logout">退出</a>
            <a href="/login.html">登录</a>
            <a href="/register.html">注册</a>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-5">
            <div class="thumbnail" style="width: 450px; height: 450px">
                <img  src="/img/${goods.pic}">
            </div>
        </div>
        <div class="col-md-7">
            <p class="title_big">${goods.title}</p>
            <p class="title_sub">${goods.sub_title}</p>
            <div class="div_price">
                <span>惊爆价</span><span class="price" style="font-size: 20px; margin-left: 5px">&yen;${goods.realPrice}</span>
                <p class="right_price">
                    <span class="comment_tip">累积</span>
                    <span class="total_comment">${goods.total_comment}</span>
                    <span class="comment_tip">条评价</span>
                </p>
            </div>
            <img height="320px" src="/img/info.png">
        </div>
    </div>

    <div class="row">
        <div class="col-md-7 col-md-offset-5">
            <a class="buy" href="#">加入购物车</a>
        </div>
    </div>

    <div class="row row_pj">
        <span class="pj">商品评价</span>
    </div>

    <#--添加评价-->
    <div class="row" style="margin-top: 15px">
        <div class="col-md-offset-2 col-md-10">
            <textarea id="content" class="form-control" rows="5" placeholder="请输入评论"></textarea>
        </div>
    </div>
    <div class="row row_gray_divider">
        <div class="col-md-offset-2 col-md-1" style="padding-left: 5px">
            <button id="btn_add_comment" type="button" class="btn btn-info" >评论</button>
        </div>
    </div>


    <#--评价-->
    <#if (goods.comments?size > 0)>
        <#list goods.comments as comment>
            <div class="row row_gray_divider">
                <div class="col-md-2">
                    <p class="comment_name">
                        <img width="30px" height="30px" src="/img/icon.png" alt="" class="img-circle">
                        <span style="padding-left: 10px">${(comment.user.username)!'匿名用户'}</span>
                    </p>
                </div>
                <div class="col-md-10">
                    <p class="comment_content">${comment.content}</p>
                    <p class="comment_time">${comment.createdAt}</p>
                </div>
            </div>
        </#list>
    <#else>
        <div class="row row_gray_divider">
            <div class="col-md-offset-2 col-md-10">
                <p class="comment_content">暂无评论</p>
            </div>
        </div>
    </#if>
</div>

<script>
    $("#btn_add_comment").click(function () {
        let content = $("#content").val();

        let data = {"iid": ${goods.id}, "content": content};

        // 添加Token解决CSRF
        <#--let data = {"iid": ${goods.id}, "content": content, "token": ${token}};-->

        data = JSON.stringify(data);

        $.ajax({
            url: "/comment/add",
            data: data,
            contentType: "application/json;charset=utf-8",
            method: "post",
            success: function (result) {
                alert("评论成功!");
                $("#content").val('');
                location.reload();
            },
            error: function (msg) {
                alert("服务器出错: " + msg)
            }
        });
    });
</script>
</body>
</html>